<script setup>
import MoonNav from '@/components/MoonNav.vue';
import MoonBaner from '@/components/MoonBaner.vue';
import { ref } from 'vue'
import { getphoto } from '@/api/photo';
const photo = ref()
const vbs = ref()

const render = async () => {
  const res = await getphoto()
  photo.value = res.data[0]
  console.log(photo.value, '12312312')
  vbs.value = photo.value['scenery']
}
render()

const togs = (i) => {
  vbs.value = photo.value[i]
}

</script>

<template>
  <MoonNav></MoonNav>
  <MoonBaner></MoonBaner>
  <!-- tab栏目 start -->
  <div class="moon-tab">
    <ul class="tab-nav">
      <!-- 触发同一个方法 -->
      <li @click="togs('scenery')">景色</li>
      <li @click="togs('cat')">猫猫</li>
      <li @click="togs('food')">美食</li>
      <li @click="togs('vlog')">vlog</li>
    </ul>
    <div class="tab-content">
      <el-card style="width: 400px;margin-top: 25px;" v-for="item in vbs">
        <template #header>{{ item.title }}</template>
        <img :src="item.imgs" style="width: 100%" />
      </el-card>
    </div>
  </div>
  <!-- tab栏目 end -->
</template>



<style lang="less" scoped>
// .carbox {
//   width: 1100px;
//   display: flex;
//   justify-content: space-evenly;
//   align-items: center;
//   flex-wrap: wrap;
//   margin: 20px auto;
//   background: pink;
// }



.moon-tab {
  width: 1300px;
  margin: 10px auto;
  overflow: hidden;
  // box-shadow: 2px 2px 10px rgba(0, 0, 0, .5);

  .tab-nav {
    width: 1300px;
    height: 100px;
    border-radius: 20px;
    display: flex;
    justify-content: start;
    align-items: center;

    li {
      flex-shrink: 0;
      padding: 10px 20px;
      font-size: 16px;
      text-align: center;
      margin-left: 25px;
      border: 1px solid #000;

      a {
        height: 20px;
        display: block;
        color: #000;
      }
    }
  }

  .tab-content {
    width: 1300px;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;

    div {
      margin: 0px 10px;
    }
  }
}
</style>